<template>
    <div :id="chartId" style="width: 400px;height: 300px;margin: 0 auto;display: flex;justify-content: center" />
</template>

<script>
    export default {
        name: "pieChart",
        props: {
            pieData: {
                type: Object,
                default: () => null
            },
            chartId: {
                type: String,
                default: 'pieChart'
            }
        },
        watch: {
            pieData(val){
                if (val) {
                    if (!this.pieChart) {
                        this.pieChart = this.$echarts.init(document.getElementById(this.chartId))
                    }
                    this.setOption(val)
                }
            },
        },
        data() {
            return {
                pieChart: null
            }
        },
        mounted() {
            if (this.pieData) {
                this.pieChart = this.$echarts.init(document.getElementById(this.chartId))
                this.setOption(this.pieData)
            }
        },
        methods: {
            setOption({name, data}) {
                const color = this.randArr([
                    '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976',
                    '#6173d6', '#914ce5', '#42b1cc', '#ff55ac'])
                const option = {
                    title: {
                        text: name,
                        left: 'center'
                    },
                    color,
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    grid: {
                        top: 'top'
                    },
                    legend: {
                        itemWidth: 10,
                        itemHeight: 10,
                        bottom: 'bottom',
                    },
                    series: [
                        {
                            name,
                            type: 'pie',
                            radius: '50%',
                            center: ['50%', '45%'],
                            label: {
                                show: false
                            },
                            selectedMode: 'single',
                            data,
                            labelLine: {
                                show: false
                            },
                            label: {
                                show: this.pieData.label,
                                formatter: '{c}',
                                position: 'inner',
                            },
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                this.pieChart.setOption(option)
            },
            randArr(arr) {
                for (var i = 0; i < arr.length; i++) {
                    var iRand = parseInt(arr.length * Math.random());
                    var temp = arr[i];
                    arr[i] = arr[iRand];
                    arr[iRand] = temp;
                }
                return arr;
            }
        }
    }
</script>
